<template>
  <div class="judge-details">
    <a-card title="基础信息"  v-if="!loading" size="small" class="baseInfo">
      <template #extra>
        <a @click="() => {router.go(-1)}">返回</a>
      </template>
      <a-descriptions size="default" title="" bordered>
        <a-descriptions-item label="题目">
          <a @click="toProblem(judge.problemVO?.id)">{{judge.problemVO?.title}}</a>
        </a-descriptions-item>
        <a-descriptions-item label="语言"><span>{{judge.baseInfo?.language}}</span></a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-tag :color="getTypeByStatus(judge.baseInfo?.status).rgb">{{getTypeByStatus(judge.baseInfo?.status).name}}</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="用户">
          <a>{{judge.userVO?.nickName}}</a>
        </a-descriptions-item>
        <a-descriptions-item label="内存" >
          <span>{{judge.baseInfo?.memory || 0}}KB</span>
        </a-descriptions-item>
        <a-descriptions-item label="IO分数" :span="3">
          <span>{{judge.baseInfo?.score || 0}}/{{judge.baseInfo?.oiRankScore || 0}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="用时">
          <span>{{judge.baseInfo?.time || 0}}MS</span>
        </a-descriptions-item>
        <a-descriptions-item label="代码长度">
          <span>{{judge.baseInfo?.length}}</span>
        </a-descriptions-item>
        <a-descriptions-item label="提交时间">
          <span>{{parseTime(judge.baseInfo?.submitTime)}}</span>
        </a-descriptions-item>
      </a-descriptions>
<!--      <a-row>-->
<!--        <a-col :span="8">-->
<!--          <a-form layout="vertical" >-->
<!--            <a-form-item label="题目">-->
<!--              <a @click="toProblem(judge.problemVO?.id)">{{judge.problemVO?.title}}</a>-->
<!--            </a-form-item>-->
<!--            <a-form-item label="语言">-->
<!--              <span>{{judge.baseInfo?.language}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item  label="状态">-->
<!--              <a-tag :color="getTypeByStatus(judge.baseInfo?.status).rgb">{{getTypeByStatus(judge.baseInfo?.status).name}}</a-tag>-->
<!--            </a-form-item>-->
<!--          </a-form>-->
<!--        </a-col>-->
<!--        <a-col :span="8">-->
<!--          <a-form layout="vertical" >-->
<!--            <a-form-item label="用户">-->
<!--              <a>{{judge.userVO?.nickName}}</a>-->
<!--            </a-form-item>-->
<!--            <a-form-item label="内存/KB">-->
<!--              <span>{{judge.baseInfo?.memory}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item  label="分数">-->
<!--              <span>{{judge.baseInfo?.score}}/{{judge.baseInfo?.oiRank}}</span>-->
<!--            </a-form-item>-->
<!--          </a-form>-->
<!--        </a-col>-->
<!--        <a-col :span="8">-->
<!--          <a-form layout="vertical" >-->
<!--            <a-form-item label="提交时间">-->
<!--              <span>{{parseTime(judge.baseInfo?.submitTime)}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item label="用时/MS">-->
<!--              <span>{{judge.baseInfo?.time}}</span>-->
<!--            </a-form-item>-->
<!--            <a-form-item  label="代码长度">-->
<!--              <span>{{judge.baseInfo?.length}}</span>-->
<!--            </a-form-item>-->
<!--          </a-form>-->
<!--        </a-col>-->
<!--      </a-row>-->
    </a-card>
    <a-card title="测试用例" style="margin: 20px 0px" size="small" class="judgeCase">
      <a-table
          size="small"
          :loading="loading"
          :columns="columns"
          :pagination="false"
          :data-source="judge && judge.judgeCaseList">
        <template #bodyCell="{ column, text ,index,record}">
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="getTypeByStatus(text).rgb">{{getTypeByStatus(text).name}}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'submitTime'">
            {{parseTime(text)}}
          </template>
          <template v-else-if="column.dataIndex === 'seq'">
            <span>#{{index + 1}}</span>
          </template>
          <template  v-else-if="column.dataIndex === 'download'">
            <a @click="downloadProblemCase(record)">下载</a>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-card title="代码" size="small"  style="margin-bottom: 20px" v-if="
    !loading && judge.baseInfo?.code">
      <x-code-mirror
          :show-tool-bar="false"
          :default-config="{
             code:judge.baseInfo?.code,
             disabled:true,
         }"
          ref="codeMirror"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, ref} from "vue";
import {getJudgeDetail} from "@/api/judge";
import {downloadTestcase} from "@/api/problem"
import XCodeMirror from "@/components/XCodeMirror/index.vue";
import {parseTime} from "@/utils/date"
import {getTypeByStatus,judgeStatusList} from "@/common/enum";
import router from "@/router";
import {download} from "@/utils/request";
import {message} from "ant-design-vue";
const loading = ref<Boolean>(true)
const props = defineProps({
  judgeId:{
    type:String,
    required:true
  }
});

onBeforeMount(async () => {
  judge.value = (await getJudgeDetail(props.judgeId)).data;
  loading.value = false
})
const judge = ref();

const columns = [
  {
    title: '测试点',
    dataIndex: 'seq',
    key: 'seq',
  },
  {
    title: '内存/KB',
    dataIndex: 'memory',
    key: 'memory 2',
  },
  {
    title: '时间/MS',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '得分',
    dataIndex: 'score',
    key: 'score',
  },
  {
    title: '下载',
    dataIndex: 'download',
    key: 'download',
  },

];

const toProblem = (id) =>{
  router.push(`/problem/${id}`);
}

const downloadProblemCase = (item) => {
  downloadTestcase(item.problemId,item.caseId).then(res => {
  //  console.log(res)
    const blob = res.data;
    if(blob.type == 'application/json'){
      message.info("沒有权限，请联系管理员授权")
      return;
    }
    const fileName = '测试用例.zip'
    if ('download' in document.createElement('a')) { // 非IE下载
      const elink = document.createElement('a')//创建一个a标签通过a标签的点击事件区下载文件
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)//使用blob创建一个指向类型数组的URL
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else { // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  })
}
</script>

<style scoped>

</style>
